<link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css">
<link rel="stylesheet" href="/css/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="/css/product.css">
<link rel="stylesheet" href="/css/tableStyle.css">
<!-- {{ random() }} -->
<div id="goodsList">
    <div class="goods-top-view">
        <div class="goods-top-left">
            <button class="btn btn-dropbox">
                <i class="fa fa-filter"></i><span class="hidden-xs">筛选</span>
            </button>
            <div class="ycxq-tabs">
                <p :class="['tab-item', {'active': statusActive == item.value}]"
                    v-for="(item, index) in statusOptions"
                    :key="index"
                    v-on:click="changeTab(item)">
                    @{{item.name}}
                    <span v-if="item.count">(@{{item.count}})</span>
                </p>
            </div>
        </div>
        <div class="ycxq-tabs">
            <p class="tab-item">批量删除</p>
            <p class="tab-item">批量上架</p>
            <p class="tab-item" style="background:#00a75b;color:#fff">+动物</p>
            <p class="tab-item" style="background:#00a75b;color:#fff">+用品</p>
        </div>
    </div>
       <!-- 列表 -->
       <div class="table-responsive" style="background:#fff;margin-top:15px">
        <table class="table table-bordered ycxq-order-table">
            <thead>
                <tr>
                    <th>
                        <el-checkbox v-model="checked"></el-checkbox>
                    </th>
                    <th scope="col">ID</th>
                    <th scope="col">序列号</th>
                    <th scope="col">状态</th>
                    <th scope="col">推荐</th>
                    <th scope="col">主图</th>
                    <th scope="col">名称</th>
                    <th scope="col">商品分类</th>
                    <th scope="col">销售价格</th>
                    <th scope="col">总库存</th>
                    <th scope="col">规格</th>
                    <th scope="col">销量</th>
                    <th scope="col">操作时间</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list" :key="index">
                    <td>
                        <el-checkbox v-model="item.checked" @change="changCheckItem"></el-checkbox>
                    </td>
                    <td>@{{item.product_id}}</td>
                    <td>@{{item.serial_number}}</td>
                    <td>@{{item.product_status == 1?'下架':'上架'}}</td>
                    <td></td>
                    <td>
                        <img style="width:50px;height:50px;" :src="getGoodsImgUrl(item.product_avatar)"/>
                    </td>
                    <td>@{{item.product_name}}</td>
                    <td>
                        @{{item.category_one.category_name}}-
                        @{{item.category_two.category_name}}-
                        @{{item.category_three.category_name}}
                    </td>
                    <td>@{{item.normal_price}}</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>@{{item.created_time}}</td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #fff !important;">
                                操作 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li v-on:click="onListRow(item, '查看详情')"><a href="#">查看详情</a></li>
                                <li v-on:click="onListRow(item, '编辑')"><a href="#">编辑</a></li>
                                <li v-on:click="onListRow(item, '上架')" v-if="item.product_status == 1"><a href="#">上架</a></li>
                                <li v-on:click="onListRow(item, '下架')" v-if="item.product_status == 2"><a href="#">下架</a></li>
                                <li v-on:click="onListRow(item, '删除')"><a href="#">删除</a></li>
                                <li v-on:click="onListRow(item, '推荐')"><a href="#">推荐</a></li>
                                <li v-on:click="onListRow(item, '刷新')"><a href="#">刷新</a></li>
                                <li v-on:click="onListRow(item, '复制')"><a href="#">复制</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <p class="ycxq-list-empty" v-if="!list.length">暂无数据</p>
    </div>
    <!-- 分页 -->
    <div id="page" class="ycxq-paging"></div>
    <!-- 弹窗 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="seller-order-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">@{{modalForm.title}}</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal" role="form">
                        <div v-if="modalForm.type==1">
                            <div class="detail-msg-item">
                                <span>订单号</span>
                                <span>@{{modalForm.row.product_id}}</span>
                            </div>
                            <div class="detail-msg-item">
                                <span>序列号</span>
                                <span>@{{modalForm.row.serial_number}}</span>
                            </div>
                            <div class="detail-msg-item">
                                <span>状态</span>
                                <span>@{{modalForm.row.product_status}}</span>
                            </div>
                            <div class="detail-msg-item">
                                <span>推荐</span>
                                <span></span>
                            </div>
                            <div class="detail-msg-item">
                                <span>主图</span>
                                <span></span>
                            </div>
                            <div class="detail-msg-item">
                                <span>名称</span>
                                <span></span>
                            </div>
                            <div class="detail-msg-item">
                                <span>商品分类</span>
                                <span></span>
                            </div>
                            <div class="detail-msg-item">
                                <span>销售价格</span>
                                <span></span>
                            </div>
                            <div class="detail-msg-item">
                                <span>总库存</span>
                                <span></span>
                            </div>
                            <div class="detail-msg-item">
                                <span>规格</span>
                                <span></span>
                            </div>
                            <div class="detail-msg-item">
                                <span>销量</span>
                                <span></span>
                            </div>
                            <div class="detail-msg-item">
                                <span>操作时间</span>
                                <span></span>
                            </div>
                        </div>
                        <div v-if="modalForm.type==2">
                            <!-- <el-form :model="goodsForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                <el-form-item label="主图" prop="">
                                    <el-input v-model="goodsForm.avatar"></el-input>
                                </el-form-item>
                                <el-form-item label="商品类目" prop="type">
                                    <el-input v-model="goodsForm.type"></el-input>
                                </el-form-item>
                                <el-form-item label="标题" prop="title">
                                    <el-input v-model="goodsForm.title"></el-input>
                                </el-form-item>
                                <el-form-item label="活动" prop="">
                                    <el-input v-model="goodsForm.activity"></el-input>
                                </el-form-item>
                                <el-form-item label="保护动物" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="品牌" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="基因" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="优惠开始时间" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="温馨提示" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="详情图" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="视频" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="子类目" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="按件满减" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="活动类型" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                                <el-form-item label="" prop="">
                                    <el-input v-model="goodsForm."></el-input>
                                </el-form-item>
                            </el-form> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="background:#fff">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" v-on:click="modalConfirm">确认</button>
            </div>
        </div>
    </div>
</div>

<script src="/js/vue/vue-2.7.js"></script>
<script src="/js/element-ui/lib/index.js"></script>
<script src="/js/pagination/paging.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<script src="/js/utils/ajaxFunc.js"></script>
<script>
    const newAuth = '{{ $newAuth }}';
    const ossPrefix = '{{ config('oss.url') }}';
    $(function () {
        let goodsListVm = new Vue({
            el: '#goodsList',
            data:{
                page: 1,
                limit: 10,
                totalPage: 0,
                list: [],
                statusActive:'0',
                statusOptions:[
                    {
                        name:'全部',
                        value:'0',
                        showCount: true,
                        count: 0
                    },
                    {
                        name:'在售中',
                        value:'1',
                        showCount: true,
                        count: 0
                    },
                    {
                        name:'已下架',
                        value:'2',
                        showCount: true,
                        count: 0
                    }
                ],
                checked:false,
                modalForm:{
                    title:'',
                    type:'',   //1查看详情，2编辑
                    row:{}
                },
                goodsForm:{}
            },
            methods:{
                getGoodsImgUrl(path) {
                    return getImgUrlFunc(path, ossPrefix)
                },
                changeTab(row) {
                    if(goodsListVm.statusActive != row.value) {
                        goodsListVm.statusActive = row.value
                        // goodsListVm.getList('change')
                    }
                },
                // 列表单条多选
                changCheckItem(){
                    console.log(this.list);

                },
                onListRow(row, type){
                    if(type == '查看详情'){
                        goodsListVm.modalForm.title = '查看详情'
                        goodsListVm.modalForm.type = '1'
                        goodsListVm.modalForm.row = row
                        $('#seller-order-modal').modal('show');
                    }else if(type == '编辑'){
                        goodsListVm.modalForm.title = '修改商品'
                        goodsListVm.modalForm.type = '2'
                        goodsListVm.modalForm.row = row
                        $('#seller-order-modal').modal('show');
                    }else if(type == '上架'){
                        this.$confirm('确认上架该商品?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            const params = {
                                serialNumber:row?.serial_number,
                                productStatus:2
                            }
                            ajaxPostFunc('/v1/api/product/transStatus', {
                            ...params
                            }, { 'newAuth': newAuth }, res => {
                                goodsListVm.getList()
                            })
                        })
                    }else if(type == '下架'){
                        this.$confirm('确认下架该商品?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            const params = {
                                serialNumber:row?.serial_number,
                                productStatus:1
                            }
                            ajaxPostFunc('/v1/api/product/transStatus', {
                            ...params
                            }, { 'newAuth': newAuth }, res => {
                                goodsListVm.getList()
                            })
                        })
                    }else if(type == '删除'){
                        this.$confirm('确认删除该商品?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            const params = {
                                serialNumber:row?.serial_number,
                            }
                            ajaxPostFunc('/v1/api/product/delete', {
                            ...params
                            }, { 'newAuth': newAuth }, res => {
                                goodsListVm.getList()
                            })
                        })
                    }else if(type == '推荐'){

                    }else if(type == '刷新'){

                    }else if(type == '复制'){
                        this.$confirm('确认复制该商品?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            const params = {
                                serialNumber:row?.serial_number,
                            }
                            ajaxPostFunc('/v1/api/product/copy', {
                            ...params
                            }, { 'newAuth': newAuth }, res => {
                                goodsListVm.getList()
                            })
                        })
                    }
                },
                modalConfirm(){

                },
                getList(val){
                    if(val) {
                        goodsListVm.page = 1
                        goodsListVm.list = []
                    }
                    ajaxPostFunc('/v1/api/product/paging', {
                        // 'shopOrderExt.status': goodsListVm.statusActive,
                        page: goodsListVm.page,
                        limit: goodsListVm.limit,
                        orderBy:'desc'
                    }, {
                        'newAuth': newAuth
                    },res => {
                        let list = []
                        res.data.map(item => {
                            list.push({
                                ...item,
                                checked:false
                            })
                        })
                        goodsListVm.list = list
                        goodsListVm.totalPage = res.totalPage
                        $('#page').paging({
                            total: res.total,
                            numberPage: goodsListVm.limit,
                            activePage: parseInt(goodsListVm.page)
                        }, function(msg) {
                            if(msg != goodsListVm.page) {
                                goodsListVm.page = parseInt(msg)
                                goodsListVm.getList()
                            }
                        })
                    })
                }
            },
            mounted() {
                setTimeout(() => {
                    goodsListVm.getList('change')
                })
            }
        })
    })
</script>
